<template>
    <div>
        <div class="header">
            <!--     返回上一页-->
            <router-link to>
                <div><img style="display: none;"></div>
            </router-link>
            <h2>水表报修</h2>
        </div>
        <ul class="sfjn sfjn2">
            <li>
                <label><i>*</i>联系人</label>
                <input type="text" v-model="name" placeholder="请输入联系人">
            </li>
            <li>
                <label><i>*</i>联系电话</label>
                <input type="text" v-model="phone" placeholder="请输入联系电话">
            </li>
            <li>
                <label><i>*</i>用水地址</label>
                <input type="text" v-model="address" placeholder="请输入用水地址">
            </li>
            <li>
                <label><i></i>备注</label>
                <textarea type="text" v-model="remarks" placeholder="请输入备注"></textarea>
            </li>
            <li>
                <label><i>*</i>报修项目</label>
                <div>
                    <van-dropdown-menu active-color="#1989fa">
                        <van-dropdown-item v-model="classify" :options="option1"/>
                    </van-dropdown-menu>
                </div>
            </li>
            <!--            <li>-->
            <!--                <label><i>*</i>身份证(正)</label>-->
            <!--                <van-uploader v-model="fileList" :after-read="afterRead01"/>-->
            <!--            </li>-->
            <!--            <li>-->
            <!--                <label><i>*</i>身份证(反)</label>-->
            <!--                <van-uploader v-model="fileList02" :after-read="afterRead02"/>-->
            <!--            </li>-->
            <li>
                <label>现场照片</label>
                <van-uploader v-model="fileList03" :after-read="afterRead03" multiple/>
            </li>
            <li>
                <label>其他照片</label>
                <van-uploader v-model="fileList04" :after-read="afterRead04" multiple/>
            </li>
        </ul>
        <div @click="sub" class="btn">提交</div>
    </div>
</template>

<script>
    import Vant, {DropdownItem, DropdownMenu, Toast} from 'vant'
    import 'vant/lib/index.css'
    import 'vant/lib/dropdown-menu/style';
    import 'vant/lib/dropdown-item/style';
    import Vue from 'vue';

    import home from "../../api/tap-water/home";

    Vue.use(Vant)
    Vue.use(Toast);
    Vue.use(DropdownMenu);
    Vue.use(DropdownItem);

    export default {
        name: "apply",
        data() {
            return {
                option1: [
                    {text: '请选择报修项目', value: ''},
                    {text: '报修项目一', value: '报修项目一'},
                    {text: '报修项目二', value: '报修项目二'},
                ],
                classify: '',
                name: '',
                phone: '',
                address: '',
                remarks: '',
                status: false,
                fileList: [],
                fileList01: [],
                fileList02: [],
                fileList03: [],
                fileList04: [],
                scenePhotos: '',
                otherPhotos: '',
                reg: this.$route.query.reg,
            }
        },
        methods: {
            afterRead03(files) {
                console.log(files);
                this.fileList = files;
                this.fileList.forEach(x => {
                    this.fileList02.push(x.file);
                });
                console.log(this.fileList02);
                //文件读取完成后的回调函数
                home.UploadImgs(this.fileList02).then(response => {
                    this.scenePhotos = this.scenePhotos.concat(response.data.data.urlFull)
                    this.scenePhotos = this.scenePhotos.concat(",")
                });
            },
            afterRead04(files) {
                //文件读取完成后的回调函数
                home.UploadImgs(files).then(response => {
                    this.otherPhotos = this.otherPhotos.concat(response.data.data.urlFull)
                    this.otherPhotos = this.otherPhotos.concat(",")
                });
            },
            submitWaterInfoList() {
                if (this.name === '') {
                    Toast.fail("联系人名称不能为空");
                    return;
                }
                if (this.phone === '') {
                    Toast.fail("联系电话不能为空");
                    return;
                }
                if (this.address === '') {
                    Toast.fail("用水地址不能为空");
                    return;
                }

                home.submitInfoList(this.name, this.phone, this.address, this.remarks, this.classify, this.scenePhotos, this.otherPhotos, this.reg)
                    .then(response => {
                        this.status = response.data.stus;
                    });
                Toast.success("提交成功");
                if (this.reg === '城市') {
                    this.$router.push({path: '/tap-water/city_repair'})
                } else if (this.reg === '农村') {
                    this.$router.push({path: '/tap-water/countryside_repair'})
                }

            },
            sub() {
                this.submitWaterInfoList()
            },
        },
    }
</script>

<style scoped>
    @import "../../assets/tap-water/css/base.css";
    @import "../../assets/tap-water/css/other.css";
</style>